<template>
    <div class="main">
        <n-tabs type="line" animated>
            <n-tab-pane name="个人成绩" tab="个人成绩">
                <n-select
                    v-model:value="params.training_id"
                    :options="trainAll"
                />
                <n-data-table
                    :columns="columns"
                    :data="data"
                    :row-key="(row) => row.name"
                    :bordered="false"
                />
            </n-tab-pane>
            <n-tab-pane name="评分规则" tab="评分规则">
                <div style="height: 80vh">
                    <img :src="STATIC + 'img/%E8%AF%84%E5%88%86%E8%A7%84%E5%88%99.png'" alt="">
                </div>
            </n-tab-pane>
        </n-tabs>
    </div>
    <task-analysis-modal ref="analysis"/>
    <vue-flow-modal ref="vueFlow"/>
</template>

<script setup>
import {useStudentStore} from "@/stores/student";
import {useRoute} from "vue-router";
import workApi from "@/http/workApi";
import TaskAnalysisModal from "@/components/student/查看成绩模态框/TaskAnalysisModal.vue";
import VueFlowModal from "@/components/student/查看成绩模态框/VueFlowModal.vue";
import {STATIC} from "@/assets/server"
const analysis = ref(null)
const vueFlow = ref(null)
const student = useStudentStore()
const route = useRoute()
student.setMenuValue(route.name, !route.query.taskId)
const isSelect = ref("成绩")
const setIsSelect = (value) => isSelect.value = value
const columns = [
    {
        title: "实训任务名称",
        key: "name"
    },
    {
        title: "任务分析得分",
        key: "analysis_score",
        render(row) {
            return h(
                'span',
                {
                    class: 'span-button pointer',
                    onClick: () => analysis.value.open(row.training_id, row.task_id)
                },
                {default: () => row.analysis_score}
            )
        }
    },
    {
        title: "任务执行得分",
        key: "perform_score",
        render(row) {
            return h(
                'span',
                {
                    class: 'span-button pointer',
                    onClick: () => vueFlow.value.open(row.training_id, row.task_id)
                },
                {default: () => row.perform_score}
            )
        }
    },
    {
        title: "个人总分",
        key: "all_score"
    },
    {
        title: "班级排名",
        key: "ranking"
    },
]
const data = ref([])

const params = reactive({
    training_id: null
})
watch(
    () => params.training_id,
    () => {
        getScore()
    }
)
const trainAll = ref([
    {label: "全部", value: null}
])

function getScore() {
    workApi.get("student/training_task_score", {
        params: !params.training_id ? null : params
    }).then(r => {
        data.value = r.data
        if (params.training_id === null) {
            trainAll.value = [
                {label: "全部", value: null}
            ]
            for (let i of r.data) {
                trainAll.value.push(
                    {label: i.name, value: i.id}
                )
            }
        }
    })
}

getScore()

</script>

<style scoped lang="less">
.main {
    padding: 10px;
    height: 90vh;

    img {
        height: 100%;
    }
}

</style>